<template>
	<div class="pages">
		<div class="serachBox">
			<u-search :placeholder="$t('libary.search')" v-model="searchKey" :showAction="false" bgColor="#fff"
				@search="searchContent" @custom="searcClickhContent" @clear="clearCibtent"></u-search>
		</div>
		<view class="modelBox">
			<view class="modelItems" v-for="(t,index) in getYiFenLeiData" :key="index" @click="settingsItems(t,index)">
				<image  src="../../static/model1.png" mode="" style="width: 80rpx;height: 80rpx;" v-show="index == 0"> </image>
				<image  src="../../static/model2.png" mode="" style="width: 80rpx;height: 80rpx;" v-show="index == 1"> </image>
				<image  src="../../static/model3.png" mode="" style="width: 80rpx;height: 80rpx;" v-show="index == 2"> </image>
				<image  src="../../static/model4.png" mode="" style="width: 80rpx;height: 80rpx;" v-show="index == 3"> </image>
				</view>
				
			</view>
		</view>
		<view class="selectBoxItemssss" @click.stop="selecselectTypeshow = true" v-if="libarytypeindex == 0 || libarytypeindex == 1">
			<view class="tips">
				{{selectTypeTips ||'ALL'}}
			</view>
			<u-icon name="arrow-down" v-if="selecselectTypeshow == false"></u-icon>
			<u-icon name="arrow-up" v-else></u-icon>
		</view>
		<u-picker :show="selecselectTypeshow" :columns="selectTypeData" keyName="label" :confirmText="$t('Confirm')"
			:cancelText="$t('Cancel')" @confirm="selectypeconfirm" @cancel="selecselectTypeshow = false"></u-picker>
		<FormsOrMaterials ref="FormsOrMaterials" v-show="libarytypeindex == 0" />
		<Brochures ref="Brochures" v-show="libarytypeindex == 1" />
		<ComplianceOrManual ref="ComplianceOrManual" v-show="libarytypeindex == 2" />
		<TrainingOrTutorial ref="TrainingOrTutorial" v-show="libarytypeindex == 3" />
	</div>
</template>

<script>
	import FormsOrMaterials from "./libraryCom/FormsOrMaterials.vue";
	import Brochures from "./libraryCom/Brochures.vue";
	import ComplianceOrManual from "./libraryCom/ComplianceOrManual.vue";
	import TrainingOrTutorial  from "./libraryCom/TrainingOrTutorial.vue";

	export default {
		components: {
			FormsOrMaterials,
			Brochures,
			ComplianceOrManual,
			TrainingOrTutorial 
		},
		data() {
			return {
				typeId:'',//二级分类id
				newUrl: 0, //0为新接口1为老接口
				selectTypeData: [], //下拉分类数据
				searchKey: '',
				selectTypeTips: '',
				selecselectTypeshow: false,
				libarytypeindex: 0,
				dadaList: [],

				// getLibraryTypeData: [{
				// 	value: 0,
				// 	label: "Forms & Materials",
				// 	path:'../../static/model1.png'
				// }, {
				// 	value: 1,
				// 	label: "Brochures",
				// 	path:'../../static/model2.png'
				// }, {
				// 	value: 2,
				// 	label: "Compliance Manual",
				// 	path:'../../static/model3.png'
				// },{
				// 	value: 3,
				// 	label: "Training & Tutorial",
				// 	path:'../../static/model4.png'
				// }] 
				getYiFenLeiData:[],//一级分类
			}
		},
		onShow() {
			this.getYiFenLei()
		},
		onLoad() {
		},
		methods: {
			
			selectypeconfirm(e) {
				this.selectTypeTips = e.value[0].label
				this.typeId = e.value[0].id
				
				this.selecselectTypeshow = false
				if (this.libarytypeindex == 0) {
					this.$refs.FormsOrMaterials.childCategoryId = this.typeId
					this.$refs.FormsOrMaterials.getList()
				} else if (this.libarytypeindex == 1) {
					this.$refs.Brochures.childCategoryId = this.typeId
					this.$refs.Brochures.getList()
				} else if (this.libarytypeindex == 2) {
					this.$refs.ComplianceOrManual.getList()
				} else if (this.libarytypeindex == 3) {
					this.$refs.TrainingOrTutorial.getList()
				}
			},
			// 切换分类
			settingsItems(t, index) {
				this.libarytypeindex = index
				if (index == 0) {
					this.selectType(this.getYiFenLeiData[index].value)
					this.$refs.FormsOrMaterials.parentCategoryId = this.getYiFenLeiData[index].value
					this.$refs.FormsOrMaterials.getList()
				} else if (index == 1) {
					this.selectType(this.getYiFenLeiData[index].value)
					this.$refs.Brochures.parentCategoryId = this.getYiFenLeiData[index].value
					this.$refs.Brochures.getList()
				} else if (index == 2) {
					this.$refs.ComplianceOrManual.parentCategoryId = this.getYiFenLeiData[index].value
					this.$refs.ComplianceOrManual.getList()
				}
				else if (index == 3) {
					this.$refs.TrainingOrTutorial.parentCategoryId = this.getYiFenLeiData[index].value
					this.$refs.TrainingOrTutorial.getList()
				}
			},
			query() {
				if (this.libarytypeindex == 0) {
					this.$refs.FormsOrMaterials.parentCategoryId = this.getYiFenLeiData[this.libarytypeindex].value
					this.$refs.FormsOrMaterials.childCategoryId = this.typeId
					this.$refs.FormsOrMaterials.searchKey = this.searchKey
					this.$refs.FormsOrMaterials.getList()
				} else if (this.libarytypeindex == 1) {
					this.$refs.Brochures.parentCategoryId = this.getYiFenLeiData[this.libarytypeindex].value
					this.$refs.Brochures.childCategoryId = this.typeId
					this.$refs.Brochures.searchKey = this.searchKey
					this.$refs.Brochures.getList()
				} else if (this.libarytypeindex == 2) {
					this.$refs.ComplianceOrManual.parentCategoryId = this.getYiFenLeiData[this.libarytypeindex].value
					this.$refs.ComplianceOrManual.searchKey = this.searchKey
					this.$refs.ComplianceOrManual.getList()
				} else if (this.libarytypeindex == 3) {
					this.$refs.TrainingOrTutorial.parentCategoryId = this.getYiFenLeiData[this.libarytypeindex].value
					this.$refs.TrainingOrTutorial.searchKey = this.searchKey
					this.$refs.TrainingOrTutorial.getList()
				}
			},
			// 获取一级分类数据
			getYiFenLei() {
				this.$get(`/biz/app/libraryCategoryList`, {
					parentId: 0
				}, this.newUrl).then(res => {
					
					console.log(res, '一级分类');
					this.getYiFenLeiData = res.data.data.length <= 0 ? [] : res.data.data.map(items => {
						return {
							value:items.id,
							label:items.name
						}
					}) 
					this.$refs.FormsOrMaterials.parentCategoryId = this.getYiFenLeiData[0].value
					this.selectType(this.getYiFenLeiData[0].value)
				})
			},
			// 获取library二级分类的下拉数据
			selectType(parentId) {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/biz/app/libraryCategoryList`, {
					parentId: parentId
				}, this.newUrl).then(res => {
					let da = []
					console.log(res, 'resresresresresresresresres');
					da = res.data.data.map(items => {
						return {
							label: items.name,
							id: items.id
						}
					})
					da.unshift({
						label: "ALL",
						id: ''
					})
					this.selectTypeData = [da]
				})
			},
			// 回车触发
			searchContent(e) {
				this.query()
			},
			// 点击搜索触发
			searcClickhContent(e) {
				this.query()
			},
			// 清空内容时触发
			clearCibtent(e) {
				this.query()
			},
		}
	}
</script>
<style scoped>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		/* padding: 0 26rpx; */
		box-sizing: border-box;
		background-color: #F0F0F0;
	}

	.serachBox {
		display: flex;
		width: 100%;
		/* height: 64rpx; */
		/* margin-top: 26rpx; */
		margin: 16rpx 0 0rpx;
		padding: 26rpx;
		align-items: center;
		box-sizing: border-box;
	}

	.items {
		width: 700rpx;
		height: 418rpx;
		background-color: #fff;
		border-radius: 16rpx;
		/* margin-bottom: 26rpx; */
		margin: 0 auto 26rpx;
		padding: 26rpx;
		box-sizing: border-box;
	}

	.itemsLeft {
		width: 100%;
		height: 230rpx;
		background: rgba(39, 53, 98, 0.37);
		margin-right: 26rpx;
	}

	.itemsRightTxt {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;

	}

	.itemsRightDate {

		font-family: Montserrat;
		font-size: 16px;
		font-weight: 400;
		line-height: 15px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;
	}

	.settings {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin-top: 32rpx;
	}
	
	.settingsItems {
		height: 64rpx;
		background-color: #fff;
		line-height: 64rpx;
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		margin-left: 20rpx;
		padding: 0 20rpx;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
	}

	.settingsItemszhong {
		background-color: #273562;
		color: #fff;
	}

	.selectBoxItemssss {
		width: 586rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 15rpx;
		box-sizing: border-box;
		height: 50rpx;
		border-radius: 16rpx;
		background-color: #fff;
		border: 2rpx solid #273562;
		/* margin-left: 20rpx; */
		margin: 0 auto 30rpx;
	}


	.tips {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* width: 250rpx; */
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 10px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #808080;
	}
	.modelBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		/* margin-top: 32rpx; */
		height: 80rpx;
		padding: 0 82rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
	}
	
	.modelItems {
		width: 80rpx;
		height: 80rpx;
	}
</style>